<script setup lang="ts">
import {
  Modal,
  Form,
  FormItem,
  Input,
  Row,
  Col,
  Select,
  SelectOption,
} from 'ant-design-vue';
const props = defineProps({
  open: {
    type: Boolean,
    default: false
  },
  data: {
    type: Object,
    default: null
  },
})
const emit = defineEmits(['ok', 'cancel'])
</script>

<template>
  <Modal :open="open" :title="data? '编辑' : '新建'" :maskClosable="false" @cancel="emit('cancel')" @ok="emit('ok')"
         :style="{ maxWidth: '50%', width: '50%' }" >

    <Form layout="horizontal" :labelCol="{ span: 6 }" :wrapperCol="{ span: 18 }">
      <hr class="mb-5"/>
      <Row :gutter="16" >
        <Col :span="8">
          <FormItem label="用户名">
            <Input v-model:value="data.user_name" placeholder="请输入用户名"></Input>
          </FormItem>
        </Col>
        <Col :span="8">
          <FormItem label="昵称">
            <Input v-model:value="data.nick_name" placeholder="请输入昵称"></Input>
          </FormItem>
        </Col>
        <Col :span="8">
          <FormItem label="租户">
            <Select v-model:value="data.tenant_name" placeholder="请选择租户">
              <SelectOption :value="1">男</SelectOption>
              <SelectOption :value="2">女</SelectOption>
            </Select>
          </FormItem>
        </Col>
      </Row>
      <Row :gutter="16">
        <Col :span="8">
          <FormItem label="角色">
            <Select v-model:value="data.role_name" placeholder="请选择角色">
              <SelectOption :value="1">男</SelectOption>
              <SelectOption :value="2">女</SelectOption>
            </Select>
          </FormItem>
        </Col>
        <Col :span="8">
          <FormItem label="部门">
            <Select v-model:value="data.dept_name" placeholder="请选择部门">
              <SelectOption :value="1">男</SelectOption>
              <SelectOption :value="2">女</SelectOption>
            </Select>
          </FormItem>
        </Col>
        <Col :span="8">
          <FormItem label="岗位">
            <Select v-model:value="data.post_name" placeholder="请输入岗位">
              <SelectOption :value="1">男</SelectOption>
              <SelectOption :value="2">女</SelectOption>
            </Select>
          </FormItem>
        </Col>
      </Row>
      <Row :gutter="16">
        <Col :span="8">
          <FormItem label="性别">
            <Select v-model:value="data.sex" placeholder="请选择性别">
              <SelectOption :value="1">男</SelectOption>
              <SelectOption :value="2">女</SelectOption>
              <SelectOption :value="0">未知</SelectOption>
            </Select>
          </FormItem>
        </Col>
        <Col :span="8">
          <FormItem label="手机号">
            <Input v-model:value="data.phone" placeholder="请输入手机号"></Input>
          </FormItem>
        </Col>
        <Col :span="8">
          <FormItem label="邮箱">
            <Input v-model:value="data.email" placeholder="请输入邮箱"></Input>
          </FormItem>
        </Col>
      </Row>
      <Row :gutter="16">
        <Col :span="8">
          <FormItem label="状态">
            <Select v-model:value="data.status" placeholder="请选择状态">
              <SelectOption :value="0">禁用</SelectOption>
              <SelectOption :value="1">正常</SelectOption>
            </Select>
          </FormItem>
        </Col>
        <Col :span="8">
          <FormItem label="排序">
            <Input v-model:value="data.sort" placeholder="请输入排序" type="number"></Input>
          </FormItem>
        </Col>
      </Row>
      <Row :gutter="16">
        <Col :span="24">
          <FormItem label="备注" :labelCol="{ span: 2}" >
            <Input.TextArea v-model:value="data.remark" placeholder="请选择备注" :rows="2"></Input.TextArea>
          </FormItem>
        </Col>
      </Row>
      <hr/>
    </Form>
  </Modal>
</template>

<style scoped>

</style>
